<template>
  <n-modal style="width: 400px;" v-model:show="curShow" preset="card"
           @after-enter="getInfo" @after-leave="resetInfo">
    <div style="display: flex;flex: 1;justify-content: center">
      <n-form ref="formRef" :model="form" :rules="rules" style="width: 200px;" :disabled="props.mode==='query'">
        <n-form-item label="邀请类型" path="type">
          <n-select :options="typeOptions" v-model:value="form.type"></n-select>
        </n-form-item>
        <n-form-item label="邀请码时限" path="duration">
          <n-select :options="durationOptions" v-model:value="form.duration"></n-select>
        </n-form-item>
      </n-form>
    </div>
    <template #footer>
      <div>
        <slot name="tail"></slot>
      </div>
      <div style="text-align: center">
        <n-button style="width: 28%;margin: 5px" type="success" @click="confirm">确认</n-button>
        <n-button style="width: 28%;margin: 5px" type="error" @click="curShow=false"> 取消</n-button>
      </div>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import api from "@/api";

const props = defineProps({
  mode: { //create update query
    type: String,
    default: 'add'
  },
  show: {
    type: Boolean,
    default: false
  }
})

const form = ref({
  duration: '',
  type: '',
})
const typeOptions = ref([
  {
    label: '本院医护',
    value: '3',
  },
  {
    label: '外院专家',
    value: '4',
  }
])
const durationOptions = ref([
  {
    label: '1天',
    value: '24',
  },
  {
    label: '3天',
    value: '72',
  }, {
    label: '7天',
    value: '168'
  }
])
const formRef = ref()
const rules = ref({
  type: [{
    required: true,
    message: '请选择邀请码类型',
    trigger: ['input']
  }],
  duration: [{
    required: true,
    message: '请选择邀请码时限',
    trigger: ['input']
  }],
})

const confirm = () => {
  formRef.value.validate((error: any) => {
    if (!error) {
      api.invitation.create({
        type:form.value.type,
        duration:form.value.duration
      }).then(res=>{
        if(res&&res.data.code===0){
          window.$message.success(res.data.msg)
          emits('onConfirm')
        }
      })
    }
  })

}

const getInfo = () => {

}
const resetInfo = () => {
  Object.keys(form.value).forEach(item => {
    //@ts-ignore
    form.value[item] = ''
  })
}
const emits = defineEmits(['update:show', 'onConfirm'])
const curShow = computed({
  get() {
    return props.show
  },
  set(val) {
    emits('update:show', val)
  }
})
</script>

<style scoped>

</style>